<template>
    <div>
        <el-container>
            <el-header>XXXX大型后台管理系统
                <div>欢迎{{ store.getters.getUser.username }}回家</div>
                <el-button @click="loginout">退出</el-button>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu unique-opened router :default-active="$route.path" background-color="#545c64"
                        active-text-color="#ffd04b" text-color="#fff" class="el-menu-vertical-demo">
                        <el-menu-item index="/home">
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>home</span>
                        </el-menu-item>

                        <el-sub-menu v-for="item in store.getters.getUser.menus" :index="item.id.toString()">
                            <template #title>
                                <el-icon>
                                    <Setting />
                                </el-icon>
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item v-for="menu in item.children" :index="menu.url">{{ menu.title }}</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup lang="ts">
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
let store = useStore()
let router = useRouter()
let loginout = () => {
    store.dispatch('changeUserAction', false)
    router.push('/login')
}
</script>
<style scoped lang="less">
.el-header {
    background-color: rgb(181, 181, 241);
    height: 10vh;
}

.el-aside {
    background-color: #545c64;
    height: 80vh;
}
</style>